<template>
  <!-- 利用div分离 -->
  <div>
    <table style="border: 1px ridge ;width:100%">
      <el-button type="success" width="100" @click="add">+添加</el-button>
    </table>
  </div>
  <!-- 滚动条 -->
  <el-scrollbar>
    <div class="scrollbar-flex-content">
      <!-- 树状列表 -->
      <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border>
        <el-table-column prop="name" label="菜单名称" width="160" height="" />
        <el-table-column  label="图标" width="180" v-slot="scoped">
          
            <!-- 使用 v-html 指令将 prop 获得的字段转换为 HTML 标签 -->
            <!-- <div v-html="`<${scope.row.icon}/>`" @click="addaaa(scope.row.icon)" style="height: 40px;" ></div>  -->
            <component :is="geticon(scoped.row.icon)" style="height: 20px;"/>
 
        </el-table-column>
        <el-table-column prop="perms" label="权限标识" />
        <el-table-column prop="path" label="路由地址" />
        <el-table-column prop="component" label="路由组件" />
        <el-table-column prop="sortValue" label="排序" width="60" />
        <el-table-column prop="status" label="状态" width="" v-slot="scope">
          <el-switch  v-model="scope.row.status" :active-value="1" :inactive-value="0" @click="changeSwitch(scope.row)"></el-switch>
        </el-table-column>
        <el-table-column prop="time" label="创建时间" />
        <el-table-column prop="cc" label="操作" fixed="right" width="200" v-slot="scoped">
          <el-button type="success" :icon="Plus" @click="save_update(scoped.row.id)"/>
          <el-button type="primary" :icon="Edit" @click="save_update(scoped.row)"/>
          <el-button type="danger" :icon="Delete"  @click="del(scoped.row.id)"/>
        </el-table-column>
      </el-table>
    </div>
  </el-scrollbar>

  <!-- 添加和修改弹窗 -->
  <el-dialog v-model="isDialog" :title="title" width="500">
      <el-form-item label="菜单名称" :label-width="100">
        <el-input v-model="mu.name" autocomplete="off" />
      </el-form-item>
      <!-- <el-form-item label="岗位编码" :label-width="100">
        <el-input v-model="mu.postCode"  autocomplete="off" />
      </el-form-item> -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="isDialog = false">取消</el-button>
        <el-button type="primary" @click="save_update_confirm">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 删除 -->
  <el-dialog
    v-model="isConfirm"
    title="温馨提示"
    width="500"
  >
    <span>确定要删除吗?</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="isConfirm = false">取消</el-button>
        <el-button type="primary" @click="delConfirm">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script  setup>
// 树状列表所需的类型
import {
  Delete,
  Edit,
  Plus,
} from '@element-plus/icons-vue'
import { ref, onMounted,reactive } from 'vue'
import * as icons from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'


const isDialog = ref(false)
const isConfirm = ref(false)
const title = ref('')
const tableData = ref([])
let mu = reactive({})
// interface User {
//   id: number
//   date: string
//   name: string
//   address: string
 
//   dizhi:string
//   zujian:string
//   paixu:number
//   time:string
//   hasChildren?: boolean
//   children?: User[]
// }
//数据

//获取图标
const  geticon = (icon) =>{
 return icons[icon] || null
}
//渲染
const show = async () => {
  let res = await axios({
    url: "http://localhost:8080/sysMenu",
  })
  tableData.value = res.data
}
//状态开关
const changeSwitch = async (menu) =>{
  let res = await axios({
    url:`http://localhost:8080/sysMenu`,
    method:'put',
    data:menu 
  })
  ElMessage({
    message: '成功',
    type: 'success',
    plain: true,
  })
}
onMounted(() => {
  show()
})

//单独添加
const add = async ()=>{
  isDialog.value = true
  title.value = '总添加'
  let res = await axios({
       url:'http://localhost:8080/sysMenu',
       method:'post',
       data:mu
     })
     console.log(res);
     isDialog.value = false
     
}
//新增和修改
const save_update = (MenuMange)=>{

isDialog.value = true
if(MenuMange.id) for(let key in MenuMange) mu[key] = MenuMange[key]
   
   if(MenuMange.id){
     // 修改
     title.value = '修改'
   }else{
     for(let key in mu) mu[key] = null
     mu.parentId=MenuMange
     // 新增
     title.value = '添加'
     console.log(mu);
   }
}
const save_update_confirm = async ()=>{
   if(mu.id){
     let res = await axios({
       url:'http://localhost:8080/sysMenu',
       method:'put',
       data:mu
     })
   }else{
     
     console.log(mu);
     
     let res = await axios({
       url:'http://localhost:8080/sysMenu',
       method:'post',
       data:mu
     })
     
     
   }
   isDialog.value = false
   show()
 }

  //删除
  const del = async (id)=>{
    isConfirm.value = true
    mu.id = id
  }
  const delConfirm = async ()=>{
    let res = await axios({
      url:`http://localhost:8080/sysMenu/${mu.id}`,
      method:'delete'
    })
    isConfirm.value = false
    if(res.data.flag){
     show()
    }
    mu.id = ''
  }
</script>


<style scoped>
.cell{
  height: 33px;
}
/* 滑动的样式 */
.scrollbar-flex-content {
  display: flex;
}

.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}

/* ============================================= */
</style>
